<%--
  Created by IntelliJ IDEA.
  User: 85435
  Date: 2025/7/30
  Time: 10:39
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<html>
<head>
    <title>酒店管理</title>
    <style>
        .info {
            /*窗口大小*/
            width: 400px;
            height: 50px;
            /*  位置 窗口居中 */
            position: fixed;
            left: 50%;
            top: 50%;
            /*  对齐中心 */
            transform: translate(-50%, -50%);
            /*    显示在遮罩之上*/
            z-index: 200;
            background-color: white;
            /*  默认隐藏 */
            display: none;
        }

        .mask {
            /* 遮罩要覆盖整个窗口，所以宽和高都是100% */
            width: 100%;
            height: 100%;
            /* 遮罩要覆盖数据 需要设置颜色 */
            background-color: darkgrey;
            /* 遮罩的位置 要覆盖整个屏幕，遮罩的起始位置就是 左上角的顶点 */
            position: fixed;
            left: 0;
            top: 0;
            /*    默认是隐藏的*/
            display: none;
            /*  图层层级  */
            z-index: 100;
        }

    </style>
</head>
<body>

<table>
    <tr>
        <td>房屋号</td>
        <td>床位数</td>
        <td>操作</td>
    </tr>
    <%-- items 要遍历那个集合 --%>
    <c:forEach items="${rl}" var="room">
        <tr>
            <td>${room.roomNum}</td>
            <td>${room.begs}</td>
            <td>
                    <%--    根据房屋状态是否入住显示不同按钮            --%>
                    <%--    房屋未入住显示开房按钮            --%>
                    <%--    房屋已入住显示退房按钮            --%>
                <c:if test="${room.status == 0 }">
                    <button onclick="kf(${room.roomNum})">开房</button>
                </c:if>
                <c:if test="${room.status == 1}">
                    <button onclick="tf(${room.roomNum})">退房</button>
                </c:if>
            </td>
        </tr>
    </c:forEach>


</table>

<%--  填写房客入住信息  --%>
<div class="info" id="info">
    <form method="post" action="kf">
        <input id="roomInput" name="roomNum">
        <input name="card">
        <input type="submit">
    </form>
</div>

<%--  遮罩  --%>
<div id="mask" class="mask">
</div>

</body>
</html>
<script>

    function kf(roomNum) {
        //先弹出房客信息填写窗口，填写完信息后点击确定按钮，发送请求
        document.getElementById("mask").style.display = "block";//显示遮罩
        document.getElementById("info").style.display = "block";//显示遮罩
        document.getElementById("roomInput").value = roomNum;
    }


    function tf(roomNum) {
        location.href = "tf?roomNum=" + roomNum;
    }


</script>